<!DOCTYPE html>
<html>
  <head>
    <title>Static Image</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      // 地图设置中心，设置到成都，在本地离线地图 offlineMapTiles刚好有一张zoom为4的成都瓦片
      var center = ol.proj.transform([115.402084, 39.669226], 'EPSG:4326', 'EPSG:3857');
      // 计算熊猫基地地图映射到地图上的范围，图片像素为 550*344，保持比例的情况下，把分辨率放大一些
      var extent = [center[0]- 2636*1000/2, center[1]-2112*1000/2, center[0]+2636*1000/2, center[1]+2112*1000/2];

      //创建地图
      var map = new ol.Map({
          view: new ol.View({ 
              center: center,
              zoom: 7
          }),
          target: 'map'
      });

      // 加载熊猫基地静态地图层
      map.addLayer(new ol.layer.Image({
          source: new ol.source.ImageStatic({
              url: './bailixiajinqu.jpg', // 熊猫基地地图
              imageExtent: extent     // 映射到地图的范围
          })
      }));

      // 创建一个用于放置活动图标的layer
      var activityLayer = new ol.layer.Vector({
          source: new ol.source.Vector()
      });
      // 创建一个活动图标需要的Feature，并设置位置
      var activity = new ol.Feature({
          geometry: new ol.geom.Point([center[0]- 2636*1000/2 + 1755 * 1000, center[1]-2112*1000/2 + (2112 - 1330) * 1000])
      })
      // 设置Feature的样式，使用小旗子图标
      activity.setStyle(new ol.style.Style({
          image: new ol.style.Icon({
              src: './db_poi@2x.png',
              anchor: [0, 1],
              scale: 0.5
          })
      }));
      // 添加活动Feature到layer上，并把layer添加到地图中
      activityLayer.getSource().addFeature(activity);
      map.addLayer(activityLayer);
    </script>
  </body>
</html>